iT邦幫忙

2026 iThome 鐵人賽

DAY 21
0
Vibe Coding

使用 Vibe Coding 開發一套 Tutting 模擬器吧!系列 第 21

📐DAY 21 | 掌指間的微米幾何:Finger Tutting!

  • 分享至 

  • xImage
  •  

在開始今天的文章開始前,先邀請大家觀賞這段街舞史上最經典的手指舞神級影片:
🎬 Unleash Your Fingers (JayFunk)

《Unleash Your Fingers》是手指舞(Finger Tutting)達人 JayFunk 為三星(Samsung)Galaxy 系列手機拍攝的超人氣病毒式宣傳短片。

Unleash Your Fingers
圖片來源:https://news.samsung.com/global/unleash-your-fingers-2


之前的文章中,我們研究的重點全部都聚焦在大關節的 3D 骨架與 FK/IK 運動學。但如果提到 Tutting 舞蹈中最精緻、最令人驚嘆的領域,就絕對不能不提到 Finger Tutting(手指舞)!

如果說 Tutting 是利用肩、肘、腕在全身畫出幾何圖案,那麼 Finger Tutting 就是將整個幾何場景縮小到雙手與數十個指節之間的極致視覺魔術。
今天 DAY 21,我們要專注將 XBOT 標準骨架的手指細節關節徹底解構,注入我們的 3D Tutting 模擬器大腦之中!

什麼是手指舞(Finger Tutting)?

Finger Tutting(手指舞) 是 Tutting 舞蹈風格中極致微觀的分支。
舞者不需要大範圍的舞蹈場地,只需要在鏡頭前或桌面上,利用雙手的 20 多個指節關節,在僅有十幾公分的掌心空間內折疊出極致精密的直角、正方形與多邊形圖騰。

Finger Tutting

如何在模擬器中實踐?

實踐 Finger Tutting,核心跟手臂 Tutting 的邏輯不同,因為手指的骨架更精細、動作更講究「獨立控制感」。以下與 AI 討論拆解三大開發策略:

1. 30 個指節:用迴圈批次生成,不手寫寫死

XBOT 雙手各 5 指、每指 3 節,共計 30 個關節。我們採用「左右手、五指、三節」雙層迴圈批次產生 Key,直接塞進與身體關節相同的註冊表中。

  • 好處:選取、拍點記錄、JSON 匯出與鏡像等通用邏輯完全不需修改,手指自動涵蓋進去。
  • 客製細節:針對 3D 場景調整指節小球的尺寸與顏色(做得比身體關節球小),避免十根手指在畫面中擠成一團。

2. 手指 UI 面板:從「點擊 3D 小球」改為「按鈕化操控」

在 3D 場景中直接用滑鼠點擊微小的指節球非常難精準命中。因此我們做了一個專屬的「手指」分頁卡片:

  • 左右手各一張獨立卡片,每根手指為一列,設有「根/中/末」三顆按鈕。
  • 點擊按鈕效果與直接點擊 3D 球相同,皆會跳出旋轉環,大幅提升操作精確度與速度。

3. 手指 IK 策略:比照脊椎迭代,非比照手臂

手臂與腿部的 IK 需要一顆 Pole 球指定關節彎曲方向(有空間歧義性);但手指的解剖結構只有一個自然彎曲方向(往掌心收合),不需要輔助球。直接拖曳指尖 Target 球,整根手指骨骼即會自動收斂並順暢彎曲。

https://ithelp.ithome.com.tw/upload/images/20260828/20144288e2tN30dfek.png

XBOT 手指細節關節層級結構

為了讓模擬器能精準控制雙手的每個角度,我們將 XBOT 的手部骨架完整映射至系統的控制層(左右手各 15 個關節點,總共 30 個掌指控制點):

手指名稱 關節 Key 名稱(左右手 L_ / R_) 對應解剖學關節與位置
大拇指 HandThumb1 ~ HandThumb3 大拇指(根部 CMC / 中段 MCP / 末端 IP)
食指 HandIndex1 ~ HandIndex3 食指(根部 MCP / 中段 PIP / 末端 DIP)
中指 HandMiddle1 ~ HandMiddle3 中指(根部 MCP / 中段 PIP / 末端 DIP)
無名指 HandRing1 ~ HandRing3 無名指(根部 MCP / 中段 PIP / 末端 DIP)
小指 HandPinky1 ~ HandPinky3 小指(根部 MCP / 中段 PIP / 末端 DIP)

結語

規劃完成 XBOT 30 個掌指關節的層級映射與微操策略後,我們的模擬器即將正式具備了從大手臂 一路延伸到指尖微米幾何(Finger Tutting)的全尺度編舞能力!

明天見!!!


上一篇
📐Day 20|3D Tutting 模擬器的律動模式實作剖析
下一篇
📐DAY 22 | 掌指間的微米幾何:Finger Tutting 模式開發實踐
系列文
使用 Vibe Coding 開發一套 Tutting 模擬器吧!25
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言